
<h3 mat-dialog-title class="mb-3">
  {{data ? ('\'' + data.type + '\' type configuration') : 'New type configuration'}}
</h3>

<form (ngSubmit)="save()">

  <div mat-dialog-content>

    <mat-tab-group
      mat-stretch-tabs
      dynamicHeight
      animationDuration="0ms"
      (selectedTabChange)="onTabChanged($event)"
      #tabs>

      <mat-tab>

        <ng-template mat-tab-label>
          Type
        </ng-template>

        <div class="mt-3 tab-content">

          <div class="row">

            <div class="col-3">

              <p class="mb-1 fw-bold">Type name</p>

              <mat-form-field class="w-100 standalone-field mb-3">
                <span
                  matPrefix
                  matTooltip="Type name"
                  class="d-flex flex-nowrap align-items-center justify-content-between me-2">
                  <mat-icon>edit</mat-icon>
                  <span class="text-muted">|</span>
                </span>
                <input
                  matInput
                  required
                  [disabled]="data || isLoading"
                  placeholder="Type name ..."
                  spellcheck="false"
                  [pattern]="CommonRegEx.appNameWithUppercaseHyphen"
                  [(ngModel)]="type"
                  name="type"
                  autocomplete="off">
                  <mat-error>{{CommonErrorMessages.appNameWithUppercaseHyphen}}</mat-error>
              </mat-form-field>
    
            </div>

            <div class="col-3">

              <p class="mb-1 fw-bold">Initial questionnaire</p>

              <mat-form-field class="w-100 standalone-field me-2">
                <span
                  matPrefix
                  matTooltip="Initial questionnaire to show to user before he is allowed to chat freely"
                  class="d-flex flex-nowrap align-items-center justify-content-between me-2">
                  <mat-icon>help_outline</mat-icon>
                  <span class="text-muted">|</span>
                </span>
                <mat-select
                  [(ngModel)]="initial_questionnaire"
                  [disabled]="isLoading"
                  placeholder="Initial questionnaire ..."
                  name="initial_questionnaire">
                  <mat-option [value]="null">Remove questionnaire ...</mat-option>
                  <mat-option
                    *ngFor="let idx of questionnaires"
                    [value]="idx">
                    {{idx.name}}
                  </mat-option>
                </mat-select>
              </mat-form-field>
    
            </div>

            <div class="col-3">

              <p class="mb-1 fw-bold">Website</p>

              <mat-form-field class="w-100 standalone-field mb-3">
                <span
                  matPrefix
                  matTooltip="Website to periodically scrape for new pages"
                  class="d-flex flex-nowrap align-items-center justify-content-between me-2">
                  <mat-icon>http</mat-icon>
                  <span class="text-muted">|</span>
                </span>
                <input
                  matInput
                  placeholder="Website ..."
                  [disabled]="isLoading"
                  [(ngModel)]="base_url"
                  name="base_url"
                  autocomplete="off">
              </mat-form-field>
  
            </div>

            <div class="col-3">

              <p class="mb-1 fw-bold">Flavor</p>

              <mat-form-field class="w-100 standalone-field mb-3">
                <span
                  matPrefix
                  matTooltip="Flavor, or pre-defined prefix to use for all questions"
                  class="d-flex flex-nowrap align-items-center justify-content-between me-2">
                  <mat-icon>person</mat-icon>
                  <span class="text-muted">|</span>
                </span>
                <mat-select
                  [(ngModel)]="flavor"
                  [disabled]="isLoading"
                  placeholder="Flavor ..."
                  (selectionChange)="flavorChanged()"
                  name="flavor">
                  <mat-option
                    *ngFor="let idx of flavors"
                    [matTooltip]="idx.description"
                    matTooltipPosition="after"
                    [value]="idx">
                    {{idx.name}}
                  </mat-option>
                </mat-select>
              </mat-form-field>

            </div>

          </div>

          <div class="row">

            <div class="col-6">

              <p class="mb-1 fw-bold">System instruction</p>

              <mat-form-field class="w-100 custom-alignment standalone-field mb-3">
                <span
                  matPrefix
                  matTooltip="System message to prime model with"
                  class="d-flex flex-nowrap align-items-center justify-content-between me-2">
                  <mat-icon>face</mat-icon>
                  <span class="text-muted">|</span>
                </span>
                <textarea
                  matInput
                  placeholder="System message ..."
                  [disabled]="isLoading"
                  spellcheck="true"
                  rows="5"
                  [(ngModel)]="system_message"
                  name="system_message">
                </textarea>
              </mat-form-field>

            </div>

            <div class="col-6">

              <p class="mb-1 fw-bold">Conversation starters</p>

              <mat-form-field class="w-100 custom-alignment standalone-field mb-3">
                <span
                  matPrefix
                  matTooltip="Suggestions for questions the user can ask"
                  class="d-flex flex-nowrap align-items-center justify-content-between me-2">
                  <mat-icon>help_outline</mat-icon>
                  <span class="text-muted">|</span>
                </span>
                <textarea
                  matInput
                  placeholder="Conversation starters ..."
                  [disabled]="isLoading"
                  spellcheck="true"
                  rows="5"
                  [(ngModel)]="conversation_starters"
                  name="conversation_starters">
                </textarea>
              </mat-form-field>

            </div>

          </div>

          <div class="row">

            <div class="col-6">

              <p class="mb-1 fw-bold">Greeting</p>

              <mat-form-field class="w-100 custom-alignment standalone-field mb-3">
                <span
                  matPrefix
                  matTooltip="Greeting to welcome user with"
                  class="d-flex flex-nowrap align-items-center justify-content-between me-2">
                  <mat-icon>edit</mat-icon>
                  <span class="text-muted">|</span>
                </span>
                <textarea
                  matInput
                  placeholder="Greeting ..."
                  [disabled]="isLoading"
                  spellcheck="true"
                  rows="2"
                  [(ngModel)]="greeting"
                  name="greeting">
                </textarea>
              </mat-form-field>

            </div>

            <div class="col-6">

              <p class="mb-1 fw-bold">Prefix</p>

              <mat-form-field class="w-100 custom-alignment standalone-field mb-3">
                <span
                  matPrefix
                  matTooltip="Prefix inserted before all prompts"
                  class="d-flex flex-nowrap align-items-center justify-content-between me-2">
                  <mat-icon>face</mat-icon>
                  <span class="text-muted">|</span>
                </span>
                <textarea
                  matInput
                  placeholder="Prefix ..."
                  [disabled]="isLoading"
                  spellcheck="true"
                  rows="2"
                  [(ngModel)]="prefix"
                  name="prefix">
                </textarea>
              </mat-form-field>

            </div>

          </div>

          <div class="row">

            <div class="col-6">

              <p class="mb-1 fw-bold">Authorisation</p>

              <mat-form-field class="w-100 standalone-field">
                <span
                  matPrefix
                  matTooltip="Authorisation requirements for users to invoke model"
                  class="d-flex flex-nowrap align-items-center justify-content-between me-2">
                  <mat-icon>shield</mat-icon>
                  <span class="text-muted">|</span>
                </span>
                <mat-select
                  placeholder="Authorisation requirements ..."
                  multiple
                  name="auth"
                  [disabled]="isLoading"
                  [(ngModel)]="auth"
                  disableOptionCentering
                  panelClass="custom-select-option">
                  <mat-option
                    *ngFor="let item of roles"
                    [value]="item.name">
                    {{item.name}}
                  </mat-option>
                </mat-select>
              </mat-form-field>

            </div>

            <div class="col-6">

              <p class="mb-1 fw-bold">CAPTCHA {{recaptcha === 0 ? ' - PoW CAPTCHA' : (recaptcha < 0 ? ' - No CAPTCHA' : ' - Google reCAPTCHA')}}</p>

              <mat-form-field class="w-100 standalone-field">
                <span
                  matPrefix
                  matTooltip="Google reCAPTCHA value between 0 and 1.0. 0 to use Magic PoW CAPTCHA and -1 to completely drop all CAPTCHA"
                  class="d-flex flex-nowrap align-items-center justify-content-between me-2">
                  <mat-icon>verified_user</mat-icon>
                  <span class="text-muted">|</span>
                </span>
                <input
                  matInput
                  placeholder="Minimum reCAPTCHA value ..."
                  type="number"
                  [disabled]="isLoading"
                  max="1"
                  min="-0.1"
                  step="0.1"
                  [(ngModel)]="recaptcha"
                  name="recaptcha"
                  autocomplete="off">
              </mat-form-field>

            </div>

          </div>

          <div class="row mt-2 mb-2">

            <div class="col-12 text-end">

              <mat-checkbox
                [(ngModel)]="supervised"
                name="supervised"
                matTooltip="Save historical requests"
                matTooltipPosition="right"
                (change)="supervisedChanged()"
                class="me-4"
                [disabled]="isLoading"
                labelPosition="before"
                color="primary">Supervised</mat-checkbox>

              <mat-checkbox
                [(ngModel)]="cached"
                name="cached"
                class="me-4"
                matTooltip="Cache similar prompts on server (only for non GPT models)"
                matTooltipPosition="right"
                [disabled]="!supervised || isLoading || model?.id?.startsWith('gpt')"
                labelPosition="before"
                color="primary">Cached</mat-checkbox>

              <mat-checkbox
                [(ngModel)]="use_embeddings"
                name="use_embeddings"
                matTooltip="Whether we should use vectors (alternative is fine-tuning)"
                matTooltipPosition="right"
                [disabled]="isLoading"
                class="me-4"
                labelPosition="before"
                color="primary">Vectors</mat-checkbox>

            </div>

          </div>

        </div>

      </mat-tab>

      <mat-tab>

        <ng-template mat-tab-label>
          LLM
        </ng-template>

        <div class="tab-content">

          <div class="row">

            <div class="mt-3 col-6">

              <p class="mb-1 fw-bold">Completion slot</p>

              <mat-form-field class="w-100 standalone-field">
                <span
                  matPrefix
                  matTooltip="LLM to use for completions"
                  class="d-flex flex-nowrap align-items-center justify-content-between me-2">
                  <mat-icon>help_outline</mat-icon>
                  <span class="text-muted">|</span>
                </span>
                <mat-select
                  [(ngModel)]="completion_slot"
                  [disabled]="isLoading || !use_embeddings"
                  placeholder="Completion LLM ..."
                  name="completion_slot"
                  (selectionChange)="completionSlotChanged()">
                  <mat-option
                    *ngFor="let el of completion_slots"
                    [value]="el">
                    {{el}}
                  </mat-option>
                </mat-select>
              </mat-form-field>

            </div>

            <div class="col-3 mt-3">

              <p class="mb-1 fw-bold">Max Function Invocations</p>

              <mat-form-field class="w-100 standalone-field me-2">
                <span
                  matPrefix
                  matTooltip="Max function invocations, implying how many times the model can maximum invoke cloudlet functions for a single prompt"
                  class="d-flex flex-nowrap align-items-center justify-content-between me-2">
                  <mat-icon>timeline</mat-icon>
                  <span class="text-muted">|</span>
                </span>
                <input
                  matInput
                  placeholder="Max function invocations ..."
                  [disabled]="isLoading || !use_embeddings"
                  type="number"
                  min="1"
                  max="25"
                  [(ngModel)]="max_function_invocations"
                  name="max_function_invocations"
                  autocomplete="off">
              </mat-form-field>

            </div>

            <div class="col-3 mt-3">

              <p class="mb-1 fw-bold">Max Session items</p>

              <mat-form-field class="w-100 standalone-field me-2">
                <span
                  matPrefix
                  matTooltip="Max session items, implying maximum number of session messages before we start pruning items"
                  class="d-flex flex-nowrap align-items-center justify-content-between me-2">
                  <mat-icon>timeline</mat-icon>
                  <span class="text-muted">|</span>
                </span>
                <input
                  matInput
                  placeholder="Max session items ..."
                  [disabled]="isLoading"
                  type="number"
                  min="1"
                  max="100"
                  [(ngModel)]="max_session_items"
                  name="max_session_items"
                  autocomplete="off">
              </mat-form-field>

            </div>

          </div>

          <div class="row">

            <div class="col-3">

              <p class="mb-1 fw-bold">API key</p>

              <mat-form-field class="w-100 standalone-field">
                <span
                  matPrefix
                  matTooltip="API key to use for model when invoking LLM provider"
                  class="d-flex flex-nowrap align-items-center justify-content-between me-2">
                  <mat-icon>key</mat-icon>
                  <span class="text-muted">|</span>
                </span>
                <input
                  matInput
                  placeholder="API key ..."
                  (input)="apiKeyChanged()"
                  [disabled]="isLoading"
                  [(ngModel)]="api_key"
                  name="api_key"
                  autocomplete="off">
              </mat-form-field>

            </div>

            <div class="col-3">

              <p class="mb-1 fw-bold">Search Postfix</p>

              <mat-form-field class="w-100 standalone-field">
                <span
                  matPrefix
                  matTooltip="Static string appended to all search queries when querying training material to ensure specific snippets 'bubbles' to the top"
                  class="d-flex flex-nowrap align-items-center justify-content-between me-2">
                  <mat-icon>help_outline</mat-icon>
                  <span class="text-muted">|</span>
                </span>
                <input
                  matInput
                  placeholder="Search Postfix"
                  [disabled]="isLoading"
                  [(ngModel)]="search_postfix"
                  name="search_postfix"
                  autocomplete="off">
              </mat-form-field>

            </div>

            <div class="col-3">

              <p class="mb-1 fw-bold">No requests</p>

              <mat-form-field class="w-100 standalone-field">
                <span
                  matPrefix
                  matTooltip="Number of requests for current month"
                  class="d-flex flex-nowrap align-items-center justify-content-between me-2">
                  <mat-icon>timeline</mat-icon>
                  <span class="text-muted">|</span>
                </span>
                <input
                  matInput
                  type="number"
                  placeholder="No requests ..."
                  [disabled]="isLoading"
                  [(ngModel)]="no_requests"
                  name="no_requests"
                  autocomplete="off">
              </mat-form-field>

            </div>

            <div class="col-3">

              <p class="mb-1 fw-bold">Max requests</p>

              <mat-form-field class="w-100 standalone-field">
                <span
                  matPrefix
                  matTooltip="Maximum number of requests per month"
                  class="d-flex flex-nowrap align-items-center justify-content-between me-2">
                  <mat-icon>timeline</mat-icon>
                  <span class="text-muted">|</span>
                </span>
                <input
                  matInput
                  type="number"
                  placeholder="Max requests ..."
                  [disabled]="isLoading"
                  [(ngModel)]="max_requests"
                  name="max_requests"
                  autocomplete="off">
              </mat-form-field>

            </div>

          </div>

          <div class="row">

            <div class="col-6 mt-3">

              <p class="mb-1 fw-bold">Temperature</p>

              <mat-form-field class="w-100 standalone-field">
                <span
                  matPrefix
                  matTooltip="Temperature, implying risk model will take when generating response (0 to 1.0)"
                  class="d-flex flex-nowrap align-items-center justify-content-between me-2">
                  <mat-icon>opacity</mat-icon>
                  <span class="text-muted">|</span>
                </span>
                <input
                  matInput
                  [disabled]="isLoading"
                  placeholder="Temperature ..."
                  type="number"
                  min="0"
                  max="1"
                  step="0.1"
                  [(ngModel)]="temperature"
                  name="temperature"
                  autocomplete="off">
              </mat-form-field>

            </div>

            <div class="col-6 mt-3">

              <p class="mb-1 fw-bold">Threshold</p>

              <mat-form-field class="w-100 standalone-field">
                <span
                  matPrefix
                  matTooltip="Threshold for vectors when doing lookup into training data"
                  class="d-flex flex-nowrap align-items-center justify-content-between me-2">
                  <mat-icon>get_app</mat-icon>
                  <span class="text-muted">|</span>
                </span>
                <input
                  matInput
                  placeholder="Threshold ..."
                  type="number"
                  [disabled]="isLoading || !use_embeddings"
                  min="0.5"
                  max="1"
                  step="0.01"
                  [(ngModel)]="threshold"
                  name="threshold"
                  autocomplete="off">
              </mat-form-field>

            </div>

          </div>

          <div class="row">

            <div class="col-6 mt-3">

              <p class="mb-1 fw-bold">Completion/chat model</p>

              <mat-form-field class="w-100 standalone-field me-2">
                <span
                  matPrefix
                  matTooltip="Completion model to use to generate response"
                  class="d-flex flex-nowrap align-items-center justify-content-between me-2">
                  <mat-icon>help_outline</mat-icon>
                  <span class="text-muted">|</span>
                </span>
                <mat-select
                  [(ngModel)]="model"
                  [disabled]="isLoading || completion_slot !== 'magic.ai.chat'"
                  (selectionChange)="modelChanged()"
                  placeholder="Chat model ..."
                  name="model">
                  <mat-select-trigger>
                    {{model?.id}}
                  </mat-select-trigger>
                  <mat-option
                    class="multiline-mat-option"
                    *ngFor="let idx of getChatModels()"
                    [value]="idx">
                    <span class="d-block name-line" #typeName>
                      {{idx.id}}
                    </span>
                    <span class="d-block description-line">
                      Owned by {{idx.owned_by}}
                    </span>
                  </mat-option>
                </mat-select>
              </mat-form-field>

            </div>

            <div class="mt-3 col-6">

              <p class="mb-1 fw-bold">Vector model</p>

              <mat-form-field class="w-100 standalone-field">
                <span
                  matPrefix
                  matTooltip="Vector model to vectorise training snippets"
                  class="d-flex flex-nowrap align-items-center justify-content-between me-2">
                  <mat-icon>help_outline</mat-icon>
                  <span class="text-muted">|</span>
                </span>
                <mat-select
                  [(ngModel)]="vector_model"
                  [disabled]="isLoading || !use_embeddings"
                  placeholder="Vector model ..."
                  name="vector_model">
                  <mat-select-trigger>
                    {{vector_model?.id}}
                  </mat-select-trigger>
                  <mat-option
                    class="multiline-mat-option"
                    *ngFor="let idx of getVectorModels()"
                    [disabled]="idx.vector === false"
                    [value]="idx">
                    <span class="d-block name-line" #typeName>
                      {{idx.id}}
                    </span>
                    <span class="d-block description-line">
                      Owned by {{idx.owned_by}}
                    </span>
                  </mat-option>
                </mat-select>
              </mat-form-field>

            </div>

          </div>

          <div class="row">

            <div class="col-3 mt-3 mb-5">

              <p class="mb-1 fw-bold">Max Context tokens</p>

              <mat-form-field class="w-100 standalone-field me-2">
                <span
                  matPrefix
                  matTooltip="Max context tokens, implying maximum size of context to send to OpenAI"
                  class="d-flex flex-nowrap align-items-center justify-content-between me-2">
                  <mat-icon>timeline</mat-icon>
                  <span class="text-muted">|</span>
                </span>
                <input
                  matInput
                  placeholder="Max context tokens ..."
                  [disabled]="isLoading || !use_embeddings"
                  type="number"
                  min="1"
                  max="4000"
                  [(ngModel)]="max_context_tokens"
                  name="max_context_tokens"
                  autocomplete="off">
              </mat-form-field>

            </div>

            <div class="col-3 mt-3">

              <p class="mb-1 fw-bold">Max Request tokens</p>

              <mat-form-field class="w-100 standalone-field me-2">
                <span
                  matPrefix
                  matTooltip="Max request tokens, implying maximum prompt size provided by users"
                  class="d-flex flex-nowrap align-items-center justify-content-between me-2">
                  <mat-icon>timeline</mat-icon>
                  <span class="text-muted">|</span>
                </span>
                <input
                  matInput
                  placeholder="Max request tokens ..."
                  [disabled]="isLoading"
                  type="number"
                  min="1"
                  max="2500"
                  [(ngModel)]="max_request_tokens"
                  name="max_request_tokens"
                  autocomplete="off">
              </mat-form-field>

            </div>

            <div class="col-3 mt-3">

              <p class="mb-1 fw-bold">Max Response tokens</p>

              <mat-form-field class="w-100 standalone-field me-2">
                <span
                  matPrefix
                  matTooltip="Max response tokens, implying maximum size OpenAI is allowed to return for prompts"
                  class="d-flex flex-nowrap align-items-center justify-content-between me-2">
                  <mat-icon>timeline</mat-icon>
                  <span class="text-muted">|</span>
                </span>
                <input
                  matInput
                  placeholder="Max response tokens ..."
                  [disabled]="isLoading"
                  type="number"
                  min="1"
                  max="4000"
                  [(ngModel)]="max_tokens"
                  name="max_tokens"
                  autocomplete="off">
              </mat-form-field>

            </div>

            <div class="col-3 mt-3">

              <p class="mb-1 fw-bold">Remaining Message tokens</p>

              <mat-form-field class="w-100 standalone-field">
                <span
                  matPrefix
                  matTooltip="Max message tokens, implying maximum context size to use for conversations"
                  class="d-flex flex-nowrap align-items-center justify-content-between me-2">
                  <mat-icon>timeline</mat-icon>
                  <span class="text-muted">|</span>
                </span>
                <input
                  matInput
                  placeholder="Max message tokens ..."
                  [disabled]="true"
                  type="number"
                  min="1"
                  [value]="getMessageTokens()"
                  name="max_message_tokens"
                  autocomplete="off">
              </mat-form-field>

            </div>

          </div>

        </div>

      </mat-tab>

      <mat-tab>

        <ng-template mat-tab-label>
          Integrations (legacy)
        </ng-template>

        <div class="mt-3 tab-content">

          <div class="row">

            <div class="col-12">

              <p class="mb-1 fw-bold">Lead email address</p>

              <mat-form-field class="w-100 standalone-field">
                <span
                  matPrefix
                  matTooltip="Lead email address being where to send lead emails when user provides email address"
                  class="d-flex flex-nowrap align-items-center justify-content-between me-2">
                  <mat-icon>email</mat-icon>
                  <span class="text-muted">|</span>
                </span>
                <input
                  matInput
                  placeholder="Lead email ..."
                  [disabled]="isLoading"
                  [(ngModel)]="lead_email"
                  name="lead_email"
                  autocomplete="off">
              </mat-form-field>

            </div>

          </div>

          <div class="row">

            <div class="col-12 mt-3">

              <p class="mb-1 fw-bold">Email reply</p>

              <mat-form-field class="w-100 custom-alignment standalone-field">
                <span
                  matPrefix
                  matTooltip="Reply returned when user provides email address"
                  class="d-flex flex-nowrap align-items-center justify-content-between me-2">
                  <mat-icon>send</mat-icon>
                  <span class="text-muted">|</span>
                </span>
                <textarea
                  matInput
                  placeholder="Email reply ..."
                  [disabled]="isLoading"
                  spellcheck="true"
                  rows="3"
                  [(ngModel)]="contact_us"
                  name="contact_us">
                </textarea>
              </mat-form-field>

            </div>

          </div>

          <div class="row">

            <div class="col-6 mt-3">

              <p class="mb-1 fw-bold">Twilio Account SID</p>

              <mat-form-field class="w-100 standalone-field">
                <span
                  matPrefix
                  matTooltip="Twilio account SID if you intend to integrate model with Twilio"
                  class="d-flex flex-nowrap align-items-center justify-content-between me-2">
                  <mat-icon>person</mat-icon>
                  <span class="text-muted">|</span>
                </span>
                <input
                  matInput
                  placeholder="Twilio SID ..."
                  [disabled]="isLoading"
                  type="text"
                  [(ngModel)]="twilio_account_id"
                  name="twilio_account_id"
                  autocomplete="off">
              </mat-form-field>

            </div>

            <div class="col-6 mt-3">

              <p class="mb-1 fw-bold">Twilio Auth Token</p>

              <mat-form-field class="w-100 standalone-field">
                <span
                  matPrefix
                  matTooltip="Twilio account Auth Token (secret) if you intend to integrate model with Twilio"
                  class="d-flex flex-nowrap align-items-center justify-content-between me-2">
                  <mat-icon>key</mat-icon>
                  <span class="text-muted">|</span>
                </span>
                <input
                  matInput
                  placeholder="Twilio Auth Token ..."
                  [disabled]="isLoading"
                  type="text"
                  [(ngModel)]="twilio_account_sid"
                  name="twilio_account_sid"
                  autocomplete="off">
              </mat-form-field>

            </div>

          </div>

          <div class="row">

            <div class="col-3 mt-3">

              <p class="mb-1 fw-bold">Incoming message slot</p>

              <mat-form-field class="w-100 standalone-field">
                <span
                  matPrefix
                  matTooltip="Slot invoked when messages are sent to model"
                  class="d-flex flex-nowrap align-items-center justify-content-between me-2">
                  <mat-icon>get_app</mat-icon>
                  <span class="text-muted">|</span>
                </span>
                <input
                  matInput
                  placeholder="Incoming slot ..."
                  [disabled]="isLoading"
                  type="text"
                  [(ngModel)]="webhook_incoming"
                  name="webhook_incoming"
                  autocomplete="off">
              </mat-form-field>

            </div>

            <div class="col-3 mt-3">

              <p class="mb-1 fw-bold">Incoming webhook URL</p>

              <mat-form-field class="w-100 standalone-field">
                <span
                  matPrefix
                  matTooltip="Webhook URL to invoke when messages are sent to model"
                  class="d-flex flex-nowrap align-items-center justify-content-between me-2">
                  <mat-icon>email</mat-icon>
                  <span class="text-muted">|</span>
                </span>
                <input
                  matInput
                  placeholder="Incoming Webhook URL ..."
                  [disabled]="isLoading"
                  type="text"
                  [(ngModel)]="webhook_incoming_url"
                  name="webhook_incoming_url"
                  autocomplete="off">
              </mat-form-field>

            </div>

            <div class="col-3 mt-3">

              <p class="mb-1 fw-bold">Outgoing slot</p>

              <mat-form-field class="w-100 standalone-field">
                <span
                  matPrefix
                  matTooltip="Slot invoked when messages are sent to model"
                  class="d-flex flex-nowrap align-items-center justify-content-between me-2">
                  <mat-icon>get_app</mat-icon>
                  <span class="text-muted">|</span>
                </span>
                <input
                  matInput
                  placeholder="Outgoing slot ..."
                  [disabled]="isLoading"
                  type="text"
                  [(ngModel)]="webhook_outgoing"
                  name="webhook_outgoing"
                  autocomplete="off">
              </mat-form-field>

            </div>

            <div class="col-3 mt-3">

              <p class="mb-1 fw-bold">Outgoing webhook URL</p>

              <mat-form-field class="w-100 standalone-field">
                <span
                  matPrefix
                  matTooltip="Webhook URL to invoke when messages are sent to model"
                  class="d-flex flex-nowrap align-items-center justify-content-between me-2">
                  <mat-icon>email</mat-icon>
                  <span class="text-muted">|</span>
                </span>
                <input
                  matInput
                  placeholder="Outgoing Webhook URL ..."
                  [disabled]="isLoading"
                  type="text"
                  [(ngModel)]="webhook_outgoing_url"
                  name="webhook_outgoing_url"
                  autocomplete="off">
              </mat-form-field>

            </div>

          </div>

        </div>

      </mat-tab>

    </mat-tab-group>

  </div>

  <div mat-dialog-actions [align]="'end'">

    <button
      mat-button
      type="button"
      (click)="addFunction()">
      Add function
    </button>

    <button
      mat-button
      mat-dialog-close>
      Cancel
    </button>

    <button
      mat-flat-button
      color="primary"
      [disabled]="isLoading || !valid()"
      type="submit">
      Save
    </button>

  </div>

</form>
